<template>
  <div class="main_app">
    <h1>Hello Options</h1>
    <div id="check_jquery">check_jquery</div>
    <div id="open_resource">open_resource</div>
    <div id="test_inspect">test_inspect</div>
    <div id="get_all_resources">get_all_resources</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted(){
    // 检测jQuery
    document.getElementById('check_jquery').addEventListener('click', function()
    {
      // 访问被检查的页面DOM需要使用inspectedWindow
      // 简单例子：检测被检查页面是否使用了jQuery
      chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
      {
        var html = '';
        if (isException) html = '当前页面没有使用jQuery。';
        else html = '当前页面使用了jQuery，版本为：'+result;
        alert(html);
      });
    });

// 打开某个资源
    document.getElementById('open_resource').addEventListener('click', function()
    {
      chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
      {
        chrome.devtools.panels.openResource(result, 20, function()
        {
          console.log('资源打开成功！');
        });
      });
    });

// 审查元素
    document.getElementById('test_inspect').addEventListener('click', function()
    {
      chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
    });

// 获取所有资源
    document.getElementById('get_all_resources').addEventListener('click', function()
    {
      chrome.devtools.inspectedWindow.getResources(function(resources)
      {
        alert(JSON.stringify(resources));
      });
    });

  }
}
</script>

<style>
.main_app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
